<template>
    <div class="bottombar">
      <div class="header">
        <el-carousel :interval="4000" type="card" height="350px">
          <el-carousel-item>
            <img src="../../assets/sss1.jpg" alt="">
          </el-carousel-item>
          <el-carousel-item>
            <img src="../../assets/sss2.jpg" alt="">
          </el-carousel-item>
          <el-carousel-item>
            <img src="../../assets/sss3.jpg" alt="">
          </el-carousel-item>
          <el-carousel-item>
            <img src="../../assets/sss1.png" alt="">
          </el-carousel-item>
          <el-carousel-item>
            <img src="../../assets/sss2.png" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="content">
        <div class="cont">
          <div class="contItem" v-for="(item,index) in songList" :key="index">
            <div class="left">
              <img src="../../assets/123.jpg" alt="">
              <div class="song">
                <p>{{ item.songName }}</p>
                <p>{{ item.singer }}</p>
              </div>
            </div>
            <div class="right">
              <img src="../../assets/download.png" alt="">
              <img src="../../assets/bofang.png" alt="">
              <img src="../../assets/gengduo.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    data() {
        return {
          songList:[
              {
                songName:"不能说的秘密",
                singer:"周杰伦",
              },
              {
                songName:"光年之外",
                singer:"邓紫棋",
              },
              {
                songName:"恋爱告急",
                singer:"鞠婧祎",
              },
              {
                songName:"三国杀",
                singer:"汪苏泷",
              },
              {
                songName:"素颜",
                singer:"许嵩",
              },
              {
                songName:"戒烟",
                singer:"李荣浩",
              },
              {
                songName:"算什么男人",
                singer:"周杰伦",
              },
              {
                songName:"天空没有极限",
                singer:"邓紫棋",
              },
              {
                songName:"一天一天",
                singer:"bigbang",
              },
              {
                songName:"叹云兮",
                singer:"鞠婧祎",
              },
              {
                songName:"流星雨又来临",
                singer:"魏晨",
              },
              {
                songName:"拾亿",
                singer:"张翰",
              },
              {
                songName:"一笑倾城",
                singer:"汪苏泷",
              },
            ],
        };
    },
  }
  </script>
  <style lang="scss" scoped>
  .bottombar{
    width:calc(100vw - 230px);
    .content::-webkit-scrollbar {
      width: 0;
    }
    .content{
      height:calc(100vh - 500px);
      overflow-y:auto;
      .cont{
        .contItem{
          display:flex;
          align-items:center;
          justify-content:space-between;
          border-top:1px solid #f0f0f0;
          .left{
            display:flex;
            align-items:center;
            img{
              width:30px;
              height:30px;
            }
            .song{
              margin-left:10px;
              line-height:20px;
              p{
                font-size:12px;
              }
              p:nth-child(2){
                margin-top:-10px;
              }
            }
          }
          .right{
            img{
              margin:0 10px;
              width:20px;
              height:20px;
            }
          }
        }
      }
    }
    .header{
      img{
        width:100%;
        height:350px;
      }
    }
  }
  </style>
  